import { NavBar, Toast, Skeleton } from "antd-mobile";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import "./style.scss";
const Airplane = () => {
  // 使用useSearchParams获取url中的参数
  const [searchParams] = useSearchParams();
  // 获取出发地和目的地
  const start = searchParams.get("start");
  const end = searchParams.get("end");
  // 定义一个状态变量，用于存储航班列表
  const [fl, setFl] = useState([]);
  // 定义一个状态变量，用于判断是否有航班
  const [isMore, setIsMove] = useState(false);
  const [showSkeleton, setShowSkeleton] = useState(true);
  const navigate = useNavigate()
  // 定义一个异步函数，用于获取航班列表
  const getTripList = async () => {
    // 使用axios发送get请求，获取航班列表
    const resp = await axios.get("/api/trip/airplane", {
      params: { start, end },
    });
    // 解析返回的数据
    const { code, data, message } = resp.data;
    // 如果返回的状态码为200，表示请求成功
    if (code === 200) {
      // 打印航班列表
      console.log(data.body.fl);
      // 如果航班列表不为空，则将航班列表存储到状态变量中
      if (data.body.fl) {
        setFl(data.body.fl);
      } else {
        // 如果航班列表为空，则将isMore设置为true
        setIsMove(true);
      }
    } else {
      // 如果返回的状态码不为200，则弹出错误提示
      Toast.show(message);
    }

    setShowSkeleton(false);
  };

  const toDetail = v => {
    navigate('/trip/detail', { state: v })
  }

  // 使用useEffect钩子函数，在组件加载时调用getTripList函数
  useEffect(() => {
    getTripList();
  }, []);

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>
        <span>{start}</span>
        <span style={{ padding: "0 10px" }}>飞</span>
        <span>{end}</span>
      </NavBar>

      {showSkeleton && (
        <div className="list">
          {new Array(20).fill().map((v, i) => {
            return (
              <div className="list-item" key={i}>
                <Skeleton.Title animated />
                <Skeleton.Paragraph animated lineCount={2} />
              </div>
            );
          })}
        </div>
      )}

      <div className="list">
        {fl.map((v, i) => {
          return (
            <div className="list-item" key={i} onClick={() => toDetail(v)}>
              <div className="list-item-header">
                <div className="left">
                  <div>
                    <p>{v.dst}</p>
                    <p>
                      {v.dasn} {v.dat}
                    </p>
                  </div>
                  <div style={{ margin: "0 10px" }}>====&gt;</div>
                  <div>
                    <p>{v.ast}</p>
                    <p>
                      {v.aasn} {v.aat}
                    </p>
                  </div>
                </div>
                <div className="right">￥{v.atp}</div>
              </div>
              <div className="list-item-params">
                <span>{v.asn}</span> |{" "}
                <span>
                  {v.amn}（{v.amt}）
                </span>
              </div>
            </div>
          );
        })}
      </div>

      {isMore && (
        <div>
          当前没有直接直接飞{start}到{end}， 请选择其他交通方式
        </div>
      )}
    </div>
  );
};

export default Airplane;
